<template>
  <div class="main-chartThree txt_btm" :id="id">
    main-chartThree
  </div>
</template>

<script>
import jsonData1 from '@/assets/config/ZY_JSLINE.json'
import jsonData2 from '@/assets/config/ZY_RLLINE.json'
import jsonData3 from '@/assets/config/ZY_WSLINE.json'
import jsonData4 from '@/assets/config/ZY_YSLINE.json'
import * as echarts from "echarts";

let dataArray = [jsonData1, jsonData2, jsonData3, jsonData4]

export default {
  name: "chartThree",
  components: {},
  props: ['id'],
  data() {
    return {};
  },
  mounted() {
    // console.log("所有请求完成，数据如下：");
    let newData1 = []
    let newData2 = []
    let newData3 = []
    let newData4 = []

    dataArray.forEach((data, index) => {
      // console.log(`请求${index + 1}的数据:`, data.features);
      if (index === 0) {
        newData1 = data.features
      } else if (index === 1) {
        newData2 = data.features
      } else if (index === 2) {
        newData3 = data.features
      } else if (index === 3) {
        newData4 = data.features
      }
    });


    let newData1_1 = []
    let newData2_2 = []
    let newData3_3 = []
    let newData4_4 = []
    // 索引
    let newData5_5 = []

    // 计算每个数组的长度
    const lengths = [
      newData1.length,
      newData2.length,
      newData3.length,
      newData4.length
    ];


    // 找出最长的数组的索引
    const maxIndex = lengths.indexOf(Math.max(...lengths));
    // 根据最长的数组索引，选择对应的数组进行操作
    const longestArray = [newData1, newData2, newData3, newData4][maxIndex];
    // 遍历最长的数组，并将 index + 1 推入 newData5_5
    longestArray.forEach((item, index) => {
      newData5_5.push(index + 1);
    });


    newData1.forEach(item => {
      newData1_1.push(item.properties.SHAPE_Leng)
    })
    newData2.forEach(item => {
      newData2_2.push(item.properties.SHAPE_Leng)
    })
    newData3.forEach(item => {
      newData3_3.push(item.properties.SHAPE_Leng)
    })
    newData4.forEach(item => {
      newData4_4.push(item.properties.SHAPE_Leng)
    })


    newData1_1.push(newData1)
    newData2_2.push(newData2)
    newData3_3.push(newData3)
    newData4_4.push(newData4)


    // 假设的数据集
    // let newData1_1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    // let newData2_2 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    // let newData3_3 = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
    // let newData4_4 = [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];

    // 获取最长数组的长度以确保所有数据都被处理
    const maxLength = Math.max(newData1_1.length, newData2_2.length, newData3_3.length, newData4_4.length);

    // 初始化结果数组
    let combinedData = [];

    // 遍历最长数组的长度
    for (let i = 0; i < maxLength; i++) {
      // 对应索引位置的数据相加
      combinedData[i] = (newData1_1[i] || 0) + (newData2_2[i] || 0) + (newData3_3[i] || 0) + (newData4_4[i] || 0);
    }


    var myChart2 = echarts.init(document.querySelector("#echarts_3"));
    var option2 = {
      legend: {
        textStyle: {
          color: 'white' // 设置图例文字颜色为白色
        },
        top: 0 // 将图例放置在图表的下方
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
            color: 'white' // 设置轴指针标签文字颜色为白色
          }
        },
        textStyle: {
          color: 'white' // 设置提示框文字颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: newData5_5,
        axisLabel: {
          show: false,
          color: 'white' // 设置 X 轴标签文字颜色为白色
        },
        axisLine: {
          lineStyle: {
            color: 'white' // 设置 X 轴线颜色为白色
          }
        },
        axisTick: {
          lineStyle: {
            color: 'white' // 设置 X 轴刻度线颜色为白色
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: 'white' // 设置 Y 轴标签文字颜色为白色
          },
          axisLine: {
            show: false // 隐藏 Y 轴线
          },
          axisTick: {
            show: false // 隐藏 Y 轴刻度线
          },
          splitLine: {
            show: true, // 显示 Y 轴分割线
            lineStyle: {
              type: 'dotted', // 设置分割线为点线
              color: 'rgba(255, 255, 255, 0.5)' // 设置分割线颜色为半透明白色
            }
          }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 1,
          textStyle: {
            color: 'white'
          }
        },
        {
          start: 0,
          end: 1,
          textStyle: {
            color: 'white'
          }
        }
      ],
      series: [
        {
          data: combinedData,
          type: 'bar',
          itemStyle: {
            // color: 'cyan' // 将柱状图的颜色改为青色
            color: () => {
              return this.getRandomColor();
            }
          }
        }
      ]
    };
    myChart2.setOption(option2);
    window.addEventListener("resize", function () {
      myChart2.resize();
    });
  },
  methods: {
    getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  },
  watch: {},
  computed: {},
  beforeDestroy() {

  },
}
</script>

<style scoped>
.main-chartThree {
  position: relative;
  height: 100%;
  width: 100%;
}
</style>
